<template>
  <div id="push">
    <!--查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品名">
        <el-input
          v-model="formInline.orderNumber"
          placeholder="订单编号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!--显示订单-->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="orderNumber" label="订单编号" width="120">
      </el-table-column>
      <el-table-column prop="picUrl" label="商品图片" width="120">
        <template slot-scope="scope" width="120">
          <img :src="scope.row.picUrl" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="proName" label="商品名称" width="120"></el-table-column>
      <el-table-column prop="proNum" label="购买数量" width="120"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" :formatter="ostatic" width="120">
      </el-table-column>
      <el-table-column prop="proTotal" label="小计"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button class="danger" @click="deleteOrder(scope.row)"
            >删除</el-button
          >
          <el-button type="primary" @click="uptOrder(scope.row)"
            >修改</el-button
          >
          <el-button type="success" @click="orderInfo(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="cIndex"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!--修改订单-->
     <el-dialog title="订单修改" :visible.sync="dialogFormVisible111">
      <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="订单编号" prop="orderNumber">
          <el-input v-model="ruleForm1.orderNumber"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="orderAdress">
          <el-input v-model="ruleForm1.orderAdress"></el-input>
        </el-form-item>
         <el-form-item label="邮费" prop="postage">
          <el-input v-model="ruleForm1.postage"></el-input>
         </el-form-item>
         <el-form-item label="运费险" prop="insurance">
          <el-input v-model="ruleForm1.insurance"></el-input>
        </el-form-item>
         <el-form-item label="备注" prop="remarks">
          <el-input v-model="ruleForm1.remarks"></el-input>
        </el-form-item>
         <el-form-item label="状态" prop="orderStatus">
          <el-input v-model="ruleForm1.orderStatus"></el-input>
        </el-form-item>
         <el-form-item label="用户ID" prop="userId">
          <el-input v-model="ruleForm1.userId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="baoorder('ruleForm1')">保存</el-button>
          <el-button @click="resetForm('ruleForm1')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      cIndex: 1,
      pSize: 2,
      total: 0,
      orderStatic:0,
      formInline: {
        orderNumber: "",
      },
      dialogVisible:false,
      dialogFormVisible111:false,
      ruleForm1:{
        orderId:'',
        orderNumber:'',
        orderAdress:'',
        postage:'',
        insurance:'',
        remarks:'',
        orderStatus:'',
        userId:'',
      },
      rules:{

      },
    };
  },
  created: function () {
    this.axios
      .get("http://localhost:35043/api/Order/GetOrdersList", {
        params: {
          pageIndex: this.cIndex,
          pageSize: this.pSize,
        },
      })
      .then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
  },
  methods: {
    show()
    {
      this.axios
      .get("http://localhost:35043/api/Order/GetOrdersList", {
        params: {
          pageIndex: this.cIndex,
          pageSize: this.pSize,
        },
      })
      .then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    //订单状态
    ostatic:function(row,column,cellValue) {
      if(cellValue==0){
        return '未付款';
      }else if(cellValue==1)
      {
        return "已付款";
      }else if(cellValue==2)
      {
        return "未发货";
      }else if(cellValue==3)
      {
        return "已发货";
      }else
      {
        return "已完成";
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.axios
        .get("http://localhost:35043/api/Order/GetOrdersList", {
          params: {
            pageIndex: this.cIndex,
            pageSize: val,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count;
        });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.axios
        .get("http://localhost:35043/api/Order/GetOrdersList", {
          params: {
            pageIndex: val,
            pageSize: this.pSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count;
        });
    },
    //查询
    onSubmit() {
      this.axios
        .get("http://localhost:35043/api/Order/GetOrdersList", {
          params: {
            pageIndex: this.cIndex,
            pageSize: this.pSize,
            orderNumber: this.formInline.orderNumber,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count;
        });
    },
    //删除
    deleteOrder(a) {
      if (!confirm("确认删除吗？")) {
        return;
      }
      this.axios
        .delete("http://localhost:35043/api/Order/DeleteOrders?id="+a.orderId)
        .then((res) => {
          if (res.data.code == 0) {
            this.show();
            alert("删除成功");
          } else {
            alert("删除失败");
            return;
          }
        });
    },
    //查看详情
    orderInfo(scope){
      console.log(scope);
       this.$router.push({
            name:"OrderInfo",
            params:{
              id:scope.orderId  
            } 
            
          });
    },
     //反填
     uptOrder(b){
        this.dialogFormVisible111=true;
            this.ruleForm1=b;
            var id=b.orderId;
            console.log(id);
     },
    //修改
    baoorder(ruleForm1){
       this.$refs[ruleForm1].validate((valid) => {
          if (valid) {
              console.log(ruleForm1);
                   this.axios({
                url:"http://localhost:35043/api/Order/UptOrders",
                method:"post",
                data:this.ruleForm1,
            })
            .then((res)=>{
                if(res.data.code==0)
                {
                    alert("修改成功");
                    this.show();
                }else{
                    alert("修改失败");
                    return;
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
       })
    }
  }
}
</script>
